<script setup lang="ts">
import type { ListItem } from '../../typings'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()


// const props = defineProps({
//     list: <ListItem>
// })


const props = defineProps<{
    list: ListItem,
    currentIndex?: number
}>()

let isShow = ref<number>(1)

const goToVideoView = () => {
    // window.open(props.list.videoH265Url)
    
    router.push({
        name: 'video',
        params: {
            list:JSON.stringify(props.list),
            // finished: eval("true"),
        }

    })
}

// console.log(props.list);

</script>


<template>
    <div class="commodity flex flex-col" @click="goToVideoView()">

        <div :class="{ enlargeHight: currentIndex == 0 || currentIndex == 1 }" class="img-div relative">
            <!-- 封面图片 -->
            <img class=" w-full h-full" v-lazy="list.itemImage" :src="list.itemImage" alt="">

            <!-- 商品遮罩层 -->
            <div class="mask absolute w-full h-full left-0 top-0" style="background-color: rgba(0,0,0,.1);">
            </div>

            <!-- 封面顶部标签 -->
            <div style="z-index: 1;" class="top-icon absolute left-0 top-0 p-2 w-full flex justify-between">
                <img class=" w-11 h-9" :src="list.lefttop_taglist[0]?.img" alt="">
                <i>
                    <van-icon size="18" class=" p-1 rounded-full bg-slate-50" name="play" color="rgba(0,0,0,.3)" />
                </i>
            </div>

            <!-- 作者信息 -->
            <div style="z-index: 1;"
                class="author w-full absolute left-0 bottom-0 p-2 flex justify-around items-center  text-gray-100 text-xs">
                <img class=" rounded-full w-5 h-5" :src="list.actorAvatar" alt="">
                <span class=" mx-0.5">{{ list.actorName }}</span>
                <span :class="{ 'bg-slate-800': list.actorTag }" style="min-width: 30px;" class="p-1 ">{{ list.actorTag
                }}</span>
            </div>
        </div>

        <div class="text-title flex flex-col p-2">
        <!-- 标题 -->
            <div class="title text-gray-900">
                {{ list.title }}
            </div>
            <!-- 价格促销等 -->
            <div class="flex items-center justify-between text-red-500 font-bold w-full">
                <div class="flex items-center">
                    ￥{{ list.showDiscountPrice }}
                    <img class="ml-1 w-6 h-3" :src="list.bottomIcon" alt="">

                </div>
                <div class="sales-volume px-1.5 rounded-full bg-red-100">
                    {{ list.sale }}
                </div>
            </div>
        </div>

        <!-- 骨架屏 -->
        <van-skeleton v-show="!props.list">
            <template #template>
                <div
                    :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: '10px' }">
                    <van-skeleton-image :style="{ width: '131px', height: '141px' }" />
                    <div :style="{ marginLeft: '0', width: '100%' }">
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
        </van-skeleton>

        <!-- <video width="320" height="240" controls>
            <source :src="list.videoH265Url" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
                您的浏览器不支持Video标签。
        </video> -->

    </div>
</template>


<style lang="scss" scoped>
.commodity {
    min-width: 171px;
    min-height: 171px;
    margin-top: 10px;

    .img-div {
        width: 100%;
        height: 100%;

        &.enlargeHight {
            width: 100%;
            height: 228px;

        }
    }

    .text-title {
        .title {
            text-align: left;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
</style>